<template>
  <div id="aCoursesList" class="bg-fa of">
    <div class="mt40">
      <!-- /无数据提示 开始-->
      <section class="no-data-wrap" v-if="data.total == 0">
        <em class="icon30 no-data-ico">&nbsp;</em>
        <span class="c-666 fsize14 ml10 vam"
        >没有消息...</span
        >
      </section>
      <!-- /无数据提示 结束-->
      <!-- 数据列表 开始-->
      <article v-if="data.total > 0" class="comm-course-list">
        <el-row>
          <el-col :span="24">
            <div class="card" style="border-radius: 5px;margin: 10px 30px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
              <div style="margin: 10px 10px;">
                  <span style="font-size: 20px">
                    消息通知
                  </span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-for="item in data.items" :key="item.id">
          <el-col :span="24">
              <div class="card" style="border-radius: 5px;margin: 10px 30px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                <div style="margin: 10px 10px;">
                  <span class="title">
                    {{item.content.title}}
                  </span>
                  <span>
                    {{item.createTime}}
                  </span>
                </div>
                <div style="margin: 10px 10px;">
                  <span>
                    {{item.content.detail}}
                  </span>
                </div>
              </div>
          </el-col>
        </el-row>
      </article>
      <!-- /数据列表 结束-->
    </div>
    <div>
      <div class="paging">
        <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
        <a
          :class="{ undisable: !data.hasPrevious }"
          href="#"
          title="首页"
          @click.prevent="gotoPage(1)"
        >&lt;&lt;</a
        >
        <a
          :class="{ undisable: !data.hasPrevious }"
          href="#"
          title="前一页"
          @click.prevent="gotoPage(data.current - 1)"
        >&lt;</a
        >
        <a
          v-for="page in data.pages"
          :key="page"
          :class="{
                current: data.current == page,
                undisable: data.current == page
              }"
          :title="'第' + page + '页'"
          href="#"
          @click.prevent="gotoPage(page)"
        >{{ page }}</a
        >
        <a
          :class="{ undisable: !data.hasNext }"
          href="#"
          title="后一页"
          @click.prevent="gotoPage(data.current + 1)"
        >&gt;</a
        >
        <a
          :class="{ undisable: !data.hasNext }"
          href="#"
          title="末页"
          @click.prevent="gotoPage(data.pages)"
        >&gt;&gt;</a
        >
        <div class="clear" />
      </div>
    </div>
  </div>
</template>
<script>
import msgApi from "@/api/message";
export default {
  data() {
    return{
      event: {
        topic: "system",
        userId: "1",
        entityType: 1,
        entityId: "1",
        entityUserId: "0",
        data: {
          title: "你好",
          detail: "世界"
        }
      },
      data: {}
    };
  },
  created() {
    this.initMessage();
  },
  methods: {
    initMessage(){
      msgApi.getMsgByUid(1,8).then(response => {
        this.data=response.data.data;
      });
      msgApi.readMsg().then(response => {
      });
    },

    gotoPage(page){
      msgApi.getMsgByUid(page,8).then(response => {
        this.data=response.data.data;
      });
    }
  }
};
</script>
